define(['template', 'jquery'],(template)=>{
    class Header{
        constructor(){
            this.loadHtml().then(()=>{
                this.getRap2().then(()=>{
                    this.renderHder()
                    this.user()
                    this.setcart()
                    this.span()
                    this.sou()
                    this.keyup()
                    this.tuiChu()
                })
            })
        }
        loadHtml(){
            return new Promise(resolve=>{
                $('header').load('/html/header.html',resolve)
            })
        }
        renderHder(){
            let str = template('template2',{ list:this.respRap2 })
            $('#head-shop').html(str)
        }
        getRap2(){
            return new Promise(resolve=>{
                $.get('http://rap2api.taobao.org/app/mock/239068/index',resp=>{
                    this.respRap2 = resp.body.list
                    resolve()
                })
            })
            
        }

        

        setcart() {
            let cart = localStorage.getItem('cart')
            let count
            if(cart){
                cart = JSON.parse(cart)
                count = cart.reduce((prev,item)=>{
                    return prev += item.count
                },0)
            }
            $('#headCart span,#rightCart span').html(count)

        }

        span (){
            let str = $('#headCart span').html()
            if(str){
                $('#headCart span').show()
            }else{
                $('#headCart span').hide()
            }
        }

        sou(){
            $('#sou').on('click',function(){
                $('.box').hide()
                $('#search').fadeIn().children('span').animate({
                    opacity: 1,
                    left: 182
                },1000,function(){
                    $(this).next().fadeIn().focus()
                })
            })

            $('#boxShow').on('click',()=>{
                $('.box').fadeIn()
                $('#search').hide()

            })

        }


        keyup(){   
                $('#keyup').on('keyup', function () {     //搜索框键盘抬起事件
                        $('#searchUl').css('display', 'block')
                        $.ajax({
                            url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
                            jsonp: 'cb',
                            data: {
                                wd: $(this).val()
                            },
                            success: function (resp) {
                                var list = resp.s
                                $('#searchUl li').remove()
                                $.each(list, function (index) {
                                    $('<li>').appendTo('#searchUl').html(list[index])
                                })
                                $('#searchUl li').on('mousedown', function () {
                                    $('#keyup').val($(this).html())
                                })
                                $('#search span').on('click', function () {
                                    window.location.href = "https://www.baidu.com/s?wd=" + $('#keyup').val();
                                })
                            },
                            dataType: 'jsonp'
                        })
                        if ($('#keyup').val() == '') {
                            $('#searchUl').css('display', 'none')
                        }
                })
                $('#keyup').on('blur', function () {
                    $('#searchUl').css('display', 'none')
                })
            

        }


        user () {
            const user = JSON.parse(localStorage.getItem('user'))
            if(user){
                let name = ''
                  user.map(item=>{
                      name = item.name
                      return item
                  })
                $('.user').hide()
                $('.users').show().children('#name').html(name)
                $('#headCart span').hide()
            }
        }

        tuiChu() {
            $('.tuiChu').on('click',function(){
                $('.user').show()
                $('.users').hide().children('#name').html('')
               
            })
        }
    }
    return new Header()
})